<template>
    <view class="">
        <view>

            <view style="" class="bg-head">
                <view class="head">
                    <view class="number">
                        <text v-if="QuestionInfo.type == 1">填空</text>
                        <text v-if="QuestionInfo.type == 2">单选</text>
                        <text v-if="QuestionInfo.type == 3">多选</text>
                    </view>
                </view>
            </view>
            <view class="COM-PAGE">
                <view>
                    <view class="Single-select">
                        <text>{{ QuestionInfo.label }}</text>
                        <text v-if="QuestionInfo.note" class="wenImage" @click="openMark">?</text>
                    </view>
                    <view v-if="QuestionInfo.type == 3 || QuestionInfo.type == 2" :key="viewKey">
                        <scroll-view scroll-y style="max-height: calc(100vh - 500rpx)">
                            <view v-for="(v, i) in QuestionInfo.options" :key="i" @click="selsect(v, i)" :class="v.selectStatus
                                ? 'multi-select-titles'
                                : 'multi-select-titles-two'
                                ">{{ v.label }}
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <!-- 下一题按钮 -->
                <view class="Previous-button" v-if="!isFirst" @click="beforeQuestion()">上一题</view>
                <view class="Next-button" @click="nextQuestion()">下一题</view>
            </view>
        </view>
        <uni-popup ref="popup" background-color="#fff">
            <view class="popup-content">
                <view class="label-title">{{ QuestionInfo.label }}</view>
                <view style="margin-top: 50rpx">{{ QuestionInfo.note }}</view>
                <view class="btn-st" style="margin-top: 50rpx" @click="$refs.popup.close()">我知道了</view>
            </view>
        </uni-popup>
        <uni-popup ref="popupSubmit" background-color="#fff">
            <view class="popup-content" style="text-align: center">
                <view class="title">提交</view>
                <image style="width: 210rpx; height: 210rpx; margin-top: 30rpx" :src="require('../../static/submit.png')"
                    mode=""></image>
                <view style="margin-top: 30rpx">最后一道题答完啦，点击提交上传吧～</view>
                <view class="btn-st" style="margin-top: 50rpx" @click="onSubmit()">提交</view>
                <view @click="closeDialog" class="btn-sub">
                    <image :src="require('../../static/close.png')" style="width: 100%; height: 100%"></image>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    QuestionId,
    geFirstQuestion,
    saveQuestion,
} from "@/api/product";
export default {
    props: {
        matchId: {
            type: String,
            default: "",
        },
        matchType: {
            type: String,
            default: "",
        },
        companyName: {
            type: String,
            default: "",
        },
        tax: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            QuestionInfo: {},
            answerList: [],
            nextQuestionId: "",
            isFirst: false,
            viewKey: 0
        };
    },
    created() {
        this.geFirstQuestion();
    },
    methods: {
        onSubmit() {
            const aList = this.answerList;
            aList.forEach((v) => {
                v.answers = v.answers.map((v1) => {
                    let obj = {};
                    v.options.forEach((v2) => {
                        if (v1 == v2.id) {
                            obj = {
                                optionsId: v2.id,
                                value: v2.value,
                            };
                        }
                    });
                    return obj;
                });
            });

            const arr = aList.map((v) => {
                return {
                    conditions: v.conditions,
                    questionType: v.type,
                    questionId: v.id,
                    sheetVos: v.answers,
                };
            });
            let params = {
                matchId: this.matchId,
                matchType: this.matchType,
                answerSheetList: arr,
            };
            this.$refs.popupSubmit.close();
            saveQuestion(params).then((res) => {
                this.$refs.popupSubmit.close();
                this.$util.Tips({
                    title: "提交成功",
                });
                setTimeout(() => {
                    uni.redirectTo({
                        // url: `/pageHome/company/matchResult?id=${this.id}&type=${this.matchType}&matchStep=0`,
                        // url: `/pageHome/company/matchResult?id=${this.id}&type=${this.matchType}`,
                        url: '/pagesProduct/matchList/index'
                    });
                }, 500);
            });
        },
        openMark() {
            this.$refs.popup.open();
        },
        closeDialog() {
            this.$refs.popupSubmit.close();
        },
        selsect(v, i) {
            if (this.QuestionInfo.type == 3) {
                v.selectStatus = !v.selectStatus;
            } else if (this.QuestionInfo.type == 2) {
                this.QuestionInfo.options.forEach(
                    (val, idx) => (val.selectStatus = i == idx)
                );
            }
            console.log(this.QuestionInfo);
            this.nextQuestionId = v.nextQuestionId;
        },

        beforeQuestion() {
            const idx = this.answerList.findIndex((v) => {
                return v.id == this.QuestionInfo.id;
            });
            if (idx == 1) {
                this.isFirst = true;
            }
            this.answerList.splice(idx, 1);
            this.QuestionInfo = this.answerList[idx - 1];
            console.log("this.", this.QuestionInfo);
            this.nextQuestionId = this.QuestionInfo.options.find(
                (v) => v.id == this.QuestionInfo.answers[0]
            ).nextQuestionId;
            this.viewKey++;
        },
        //下一题
        nextQuestion() {
            this.viewKey++
            this.answerList.forEach((v) => {
                v.answers = v.options
                    .filter((v1) => v1.selectStatus)
                    .map((v2) => v2.id);
            });
            if (this.QuestionInfo.must == 1 && this.QuestionInfo.answers.length === 0)
                return this.$util.Tips("请选择必填题");

            if (this.nextQuestionId) {
                this.getQuestionInfo(this.nextQuestionId);
            } else {
                console.log("最后一道");
                this.$refs.popupSubmit.open();
            }

        },
        //根据id查询详情
        getQuestionInfo(id) {
            QuestionId(id).then((res) => {
                if (res.data) {
                    this.QuestionInfo = res.data;
                    this.answerList.push(res.data);
                    this.isFirst = false;
                } else {
                    this.$refs.popupSubmit.open();
                }
            });
        },
        geFirstQuestion() {
            geFirstQuestion().then((res) => {
                this.answerList.push(res.data);
                this.QuestionInfo = res.data;
                this.isFirst = true;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.btn-sub {
    width: 36rpx;
    height: 36rpx;
    position: absolute;
    right: 26rpx;
    top: 20rpx;
}

.wenImage {
    display: inline-block;
    background-color: #8a8a8a;
    width: 38rpx;
    height: 38rpx;
    color: #fff;
    text-align: center;
    font-size: 26rpx;
    border-radius: 20rpx;
    line-height: 38rpx;
    margin-left: 20rpx;
}

.btn-st {
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    background-color: #3a7eff;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

/deep/ .popup-content {
    text-align: left;

    padding: 15px;
    background-color: #fff;
    width: 590rpx;
    height: 610rpx;
    margin: 0 auto;
    border-radius: 12rpx;
    position: relative;
    z-index: 999;
    color: #000;
    font-size: 28rpx;

    .title {
        font-weight: 500;
        font-size: 30rpx;
        color: #111111;
        margin-top: 40rpx;
    }

    .label-title {
        text-align: center;
        font-weight: bold;
    }
}

/deep/ .uni-popup .uni-popup__wrapper {
    border-radius: 25rpx;
    overflow: hidden;
}

/* #ifdef H5 */
/deep/ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
}

/* #endif */
.bg-head {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 100% 210rpx;
    height: 210rpx;
    padding: 8rpx 40rpx 0rpx 40rpx;

    //   头部
    .head {
        display: flex;
        align-items: center;
        margin-bottom: 78rpx;

        .number {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 38rpx;
            color: #fff;
            margin-top: 5rpx;
        }

        .title {
            margin-left: 30rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #fff;
        }
    }
}

.COM-PAGE {
    margin-bottom: 100px;
    margin-top: -130rpx;
    position: relative;
    min-height: 84vh;
    background: #ffffff;
    border-radius: 30rpx;
    padding: 15rpx 40rpx 60rpx 40rpx;
    position: relative;

    //   单选多选标题
    .Single-select {
        margin-top: 20rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #222222;
    }

    //   单选多选题
    .multi-select-titles {
        padding: 30rpx 24rpx;
        margin-top: 30rpx;
        width: 100%;
        height: 100rpx;
        background: #3a7eff;
        border-radius: 16rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
    }

    .multi-select-titles-two {
        padding: 30rpx 24rpx;
        margin-top: 30rpx;
        width: 100%;
        height: 100rpx;
        background: #f6f6f6;
        border-radius: 16rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
    }

    //   上一题按钮
    .Previous-button {
        position: absolute;
        bottom: 60rpx;
        left: 26rpx;
        min-width: 305rpx;
        height: 88rpx;
        background: #2872fd;
        border-radius: 44rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 88rpx;
        text-align: center;
    }

    //   下一题按钮
    .Next-button {
        position: absolute;
        bottom: 60rpx;
        right: 26rpx;
        min-width: 305rpx;
        height: 88rpx;
        background: #2872fd;
        border-radius: 44rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 88rpx;
        text-align: center;
    }
}

/deep/.is-input-border {
    border: 0rpx !important;
    min-width: 624rpx !important;
    height: 100rpx !important;
    background: #f6f6f6 !important;
    border-radius: 16rpx !important;
    margin-top: 30rpx;
}

// 提交
.sumlt {
    image {
        display: block;
        margin: auto;
        width: 310rpx;
        height: 310rpx;
    }

    .title {
        text-align: center;
        padding: 66rpx 0rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #111111;
    }

    .but-bottom {
        margin: auto;
        width: 686rpx;
        height: 88rpx;
        background: #2872fd;
        border-radius: 44rpx;
        line-height: 88rpx;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
    }
}
</style>
